<template>
    <div class="table">
        <div v-show="allequipment">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-menu"></i> 实验室管理系统</el-breadcrumb-item>
                    <el-breadcrumb-item>设备信息</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="handle-box">
                <el-button type="primary" icon="delete" class="handle-del mr10" @click="delGroup('sels')">批量删除</el-button>
                <el-input v-model="select_word" placeholder="输入设备编号" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search"  plain @click="search">搜索</el-button>
                <el-button type="primary" icon="edit" plain @click="addDogVis=true">添加设备信息</el-button>
                <el-button type="primary" icon="el-icon-download" plain  @click="downloadfile">导出详细信息</el-button>
                <br/>
                <br/>
                <el-button type="primary" icon="el-icon-download" plain><a href="../../../static/equipment.xls">点击下载上传模板</a></el-button>
                <input type="file" @change="getFile($event)" style="width: 400px;margin-right: 10px" name="fileName" class="drinput" />
                <el-button @click="upload">上传</el-button>
            </div>
            <div>
                <el-table :data="tableData" border style="width: 100%" @selection-change="selsChange">
                    <el-table-column type="selection" width="60"></el-table-column>
                    <el-table-column type="index" width="60"></el-table-column>
                    <el-table-column prop="equipmentId" label="设备编号"></el-table-column>
                    <el-table-column prop="equipmentName" label="设备名称" ></el-table-column>
                    <el-table-column prop="doorNumber" label="所在实验室"></el-table-column>
                    <el-table-column prop="supplier" label="供应商"></el-table-column>
                    <el-table-column prop="equipmentStatus" label="设备状态"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="150">
                        <template slot-scope="scope">
                            <el-button
                                size="mini" type="primary"
                                @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="delOne(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-show="page"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageNum"
                    :page-size="15"
                    layout="prev, pager, next, jumper"
                    :total="count">
                </el-pagination>
                <el-pagination  v-show="!page"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange1"
                    :current-page.sync="pageNum1"
                    :page-size="15"
                    layout="prev, pager, next, jumper"
                    :total="count1">
                </el-pagination>
                <el-dialog title="修改设备信息" :visible.sync="updateDogVis"  size="small">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="设备编号" prop="equipmentId" >
                            <el-input v-model="ruleForm.equipmentId" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="设备名称" prop="equipmentName">
                            <el-input v-model="ruleForm.equipmentName"></el-input>
                        </el-form-item>
                        <el-form-item label="设备品牌" prop="equipmentBrand">
                            <el-input v-model="ruleForm.equipmentBrand"></el-input>
                        </el-form-item>
                        <el-form-item label="设备型号" prop="equipmentModel">
                            <el-input v-model="ruleForm.equipmentModel"></el-input>
                        </el-form-item>
                        <el-form-item label="参数信息" prop="parameterInformation">
                            <el-input v-model="ruleForm.parameterInformation"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商" prop="supplier">
                            <el-input v-model="ruleForm.supplier"></el-input>
                        </el-form-item>
                        <el-form-item label="设备价格" prop="price">
                            <el-input v-model="ruleForm.price"></el-input>
                        </el-form-item>
                        <el-form-item label="实验室门牌号" prop="doorNumber" >
                            <el-input v-model="ruleForm.doorNumber"  :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="设备状态" prop="equipmentStatus">
                            <el-select v-model="ruleForm.equipmentStatus" placeholder="请选择设备状态"  style="width: 98%">
                                <el-option label="正常" value="正常"></el-option>
                                <el-option label="维修" value="维修"></el-option>
                                <el-option label="故障" value="故障"></el-option>
                                <el-option label="报废" value="报废"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleupdata('ruleForm')">立即修改</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <el-dialog title="添加设备信息" :visible.sync="addDogVis" size="small" >
                    <el-form :model="ruleForm1" :rules="rules"  ref="ruleForm1" label-width="100px" style="width: 62%;" class="demo-ruleForm">
                        <el-form-item label="设备编号" prop="equipmentId">
                            <br/><el-input style="left: -78px; width: 100%;" v-model="ruleForm1.equipmentId"></el-input>
                        </el-form-item>
                        <el-form-item label="设备名称" prop="equipmentName">
                            <br/><el-input style="left: -78px; width: 100%;" v-model="ruleForm1.equipmentName"></el-input>
                        </el-form-item>
                        <el-form-item label="设备品牌" prop="equipmentBrand">
                            <br/><el-input style="left: -78px; width: 100%;" v-model="ruleForm1.equipmentBrand"></el-input>
                        </el-form-item>
                        <el-form-item label="设备型号" prop="equipmentModel">
                            <br/><el-input style="left: -78px; width: 100%;" v-model="ruleForm1.equipmentModel"></el-input>
                        </el-form-item>
                        <el-form-item label="参数信息" prop="parameterInformation">
                            <br/><el-input style="left: -78px; width: 100%;" v-model="ruleForm1.parameterInformation"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商" prop="supplier">
                            <br/><el-input style="left: -78px; width: 100%;" v-model="ruleForm1.supplier"></el-input>
                        </el-form-item>
                        <el-form-item label="设备价格" prop="price">
                            <br/><el-input style="left: -78px; width: 100%;" v-model="ruleForm1.price"></el-input>
                        </el-form-item>
                        <el-form-item label="实验室门牌号" prop="doorNumber">
                            <br/><el-select v-model="ruleForm1.doorNumber.uuid" placeholder="请选择实验室门牌号"  style="left: -78px; width: 100%">
                                <el-option v-for="item in ruleForm1.doorNumber" :key="item.uuid" :label="item.lab_name+'('+item.door_number+')'" :value="item.door_number"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="设备状态" prop="equipmentStatus">
                            <br/><el-select v-model="ruleForm1.equipmentStatus" placeholder="请选择设备状态"style="width:100%; left: -78px;">
                                <el-option label="正常" value="正常"></el-option>
                                <el-option label="维修" value="维修"></el-option>
                                <el-option label="故障" value="故障"></el-option>
                                <el-option label="报废" value="报废"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleadd('ruleForm1')">立即添加</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div></div>
        <div v-show="!allequipment">{{msg}}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                upath: '',
                result: '',
                uping:0,
                tableData: [{
                    uuid: '',
                    equipmentId: '',
                    equipmentName: '',
                    equipmentBrand: '',
                    equipmentModel: '',
                    parameterInformation: '',
                    supplier: '',
                    price: '',
                    doorNumber: '',
                    equipmentStatus: ''
                }],
                ruleForm: {
                    equipmentId: '',
                    equipmentName: '',
                    equipmentBrand: '',
                    equipmentModel: '',
                    parameterInformation: '',
                    supplier: '',
                    price: '',
                    doorNumber: '',
                    equipmentStatus: ''
                },
                ruleForm1: {
                    equipmentId: '',
                    equipmentName: '',
                    equipmentBrand: '',
                    equipmentModel: '',
                    parameterInformation: '',
                    supplier: '',
                    price: '',
                    doorNumber: [{
                        door_number: '',
                        lab_name: '',
                        uuid: ''

                    }],
                    equipmentStatus: ''
                },
                select_word: '',
                page:true,
                pageNum: 0,
                pageNum1: 0,
                count: 0,
                count1: 0,
                allequipment: true,
                updateDogVis: false,
                addDogVis: false,
                msg: '',
                rules: {
                    equipmentModel: [
                        {required: true, message: '请输入设备型号', trigger: 'blur'},
                        {max: 255, message: '已超过最大长度'},
                    ],
                    equipmentId: [
                        {required: true, message: '请输入设备编号', trigger: 'blur'},
                        {max: 255, message: '已超过最大长度'},
                    ],
                    equipmentName: [
                        {required: true, message: '请输入设备名称', trigger: 'blur'},
                        {max: 255, message: '已超过最大长度'},
                    ],
                    equipmentBrand: [
                        {required: true, message: '请输入设备品牌', trigger: 'blur'},
                        {max: 255, message: '已超过最大长度'},
                    ],
                    parameterInformation: [
                        {required: true, message: '请输入参数信息', trigger: 'blur'},
                        {max: 255, message: '已超过最大长度'},
                    ],
                    supplier: [
                        {required: true, message: '请输入设备供应商，若无，请填无', trigger: 'blur'},
                        {max: 255, message: '已超过最大长度'},
                    ],
                    price: [
                        {required: true, message: '请输入设备价格', trigger: 'blur'},
                        {max: 255, message: '已超过最大长度'},
                    ],
                    equipmentStatus: [
                        {required: true, message: '请选择设备状态', trigger: 'change'},
                    ],

                }
            }
        },
        created() {
            this.getData();
            this.getdoornumber();
        },
        methods: {
            downloadfile() {
                window.location.href = '/text/equipment/getExcel';
            },
            // imports() {
            //     var zipFormData = new FormData();
            //     zipFormData.append('filename', this.upath);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
            //
            //     this.$axios.post('/text/equipment/import', zipFormData,config).then((res)=>{
            //
            //     })
            // },
            upload() {
                //console.log(this.upath);
                var zipFormData = new FormData();
                zipFormData.append('filename', this.upath);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
                let config = { headers: { 'Content-Type': 'multipart/form-data' } };
                this.$axios.post('/text/equipment/import', zipFormData,config).then((res)=>{
                    if (res.data.code == 200) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    }
                    this.getData();
                });
                this.getData();
            },
            getFile(even) {
                console.log( this.upath )
                this.upath = event.target.files[0];
            },
            getdoornumber() {
                this.$axios.get('/text/equipment/querydoornumber').then((res) => {
                    this.ruleForm1.doorNumber = res.data.data;
                    if (res.data.code == 403) {
                        this.$router.push('/login');
                    }
                })
            },
            getData() {
                this.$axios.get('/text/equipment/query?pageNum=1').then((res) => {
                    if (res.data.code == 403) {
                        this.$router.push('/login');
                    }
                    else if (res.data.code == 302) {
                        this.msg = res.data.msg;
                        this.allequipment = false;
                    }
                    this.count = res.data.data.total;
                    this.tableData = res.data.data.list;
                })
            },
            handleEdit(index, row) {
                this.updateDogVis = true;
                this.ruleForm = row;
            },
            handleupdata(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.put('text/equipment/updata?' +
                            'equipmentModel=' + this.ruleForm.equipmentModel +
                            "&equipmentId=" + this.ruleForm.equipmentId +
                            "&equipmentName=" + this.ruleForm.equipmentName +
                            "&equipmentBrand=" + this.ruleForm.equipmentBrand +
                            "&parameterInformation=" + this.ruleForm.parameterInformation +
                            "&supplier=" + this.ruleForm.supplier +
                            "&price=" + this.ruleForm.price +
                            "&doorNumber=" + this.ruleForm.doorNumber +
                            "&equipmentStatus=" + this.ruleForm.equipmentStatus
                        ).then((res) => {
                            if (res.data.code == 200) {
                                this.$message({
                                    message: '修改设备信息成功！！',
                                    type: 'success'
                                });
                            }
                            this.getData();
                            this.updateDogVis = false;
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            delOne(index, row) {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$axios.delete('text/equipment/deletebyuuid?' +
                            'uuid=' + row.uuid
                        ).then((res) => {
                            this.getData(),
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },

            search(select_word) {
                this.$axios.get('/text/equipment/queryfuzzy?pageNum=1&doorNumber=' + this.select_word).then((res) => {
                    this.tableData = res.data.data.list;
                    this.page=false;
                    this.count1 = res.data.data.total;
                })
            },
            selsChange(sels) {
                this.sels = sels;
            },
            delGroup() {
                var uuids = this.sels.map(item => item.uuid).join()//获取所有选中行的id组成的字符串，以逗号分隔
                console.log(uuids);
                this.$confirm('该操作将永久删除选中的文件， 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                this.$axios.delete('/text/equipment/batchdeleteuuid?' +
                    'uuid=' + uuids
                ).then((res) => {
                    this.getData();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            handleadd(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('text/equipment/insert?' +
                            'equipmentModel=' + this.ruleForm1.equipmentModel +
                            "&equipmentId=" + this.ruleForm1.equipmentId +
                            "&equipmentName=" + this.ruleForm1.equipmentName +
                            "&equipmentBrand=" + this.ruleForm1.equipmentBrand +
                            "&parameterInformation=" + this.ruleForm1.parameterInformation +
                            "&supplier=" + this.ruleForm1.supplier +
                            "&price=" + this.ruleForm1.price +
                            "&doorNumber=" + this.ruleForm1.doorNumber.uuid +
                            "&equipmentStatus=" + this.ruleForm1.equipmentStatus
                        ).then((res) => {
                            if (res.data.code == 200) {
                                this.$message({
                                    message: '添加设备成功！！',
                                    type: 'success'
                                });
                            }
                            else if (res.data.code == 402) {
                                this.$message({
                                    message: '该设备已经存在！！',
                                });
                            }
                            this.getData();
                            this.addDogVis = false;
                            this.resetForm('ruleForm1')
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(pageNum) {
                this.$axios.get('text/equipment/query?pageNum=' + pageNum).then((res) => {
                    this.tableData = res.data.data.list;
                })
            },
            handleCurrentChange1(pageNum1,select_word) {
                this.$axios.get('text/equipment/query?pageNum=' + pageNum1+'&select_word='+this.select_word).then((res) => {
                    this.tableData = res.data.data.list;
                })
            },
        }
    }

</script>
<style scoped>
    .handle-box{
        margin-bottom: 20px;
    }
    /*.el-input{*/
        /*left: -78px;*/
        /*width: 100%;*/
        /*!*overflow: hidden;*!*/
    /*}*/
    .handle-select{
        width: 20px;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
    }
    .drbutton{
        width: 100px;
        height: 40px;
        border-radius: 5px;
        background-color: white;
    }
    .drinput{
        width: 300px;
        height: 35px;
        border-radius: 5px;
        border: 1px #d3e0e9 solid;
    }
</style>
